<template>
  <div id='files'>
    <ul>
      <li
        v-for='(item,index) in files'
        :key=index>
        <span
          class='files-index'>{{index+1}}.</span>
        <span>{{item.filename}}</span>
        <span
          class='files-btn'>
          <button>
            <a
              href="`${item.fileurl}`">下载</a>
          </button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'files',
  data() {
    return {
      files: [],
    }
  },
  mounted() {
    this.$events.on('fileslist', (args) => {
      this.files = args
    })
    this.$axios({
      method: 'post',
      url: 'http://192.168.43.118:8080/search',
    }).then((res) => {
      console.log(res.data)
      this.files = res.data
    })
  },
}
</script>

<style lang='less'>
#files {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  ul {
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    li {
      width: 100%;
      height: 2rem;
      border-bottom: 1px solid #000;
      margin-bottom: 1rem;
      .files-btn {
        float: right;
        width: 2.4rem;
        height: 1.4rem;
        text-align: center;
        line-height: 1.4rem;
        button {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
          background-color: rgba(72, 168, 247, 0.8);
          a {
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #fff;
          }
        }
      }
    }
    .files-index {
      font-size: 1.2rem;
      margin-right: 1rem;
    }
  }
}
</style>